<script setup>
import {Lock, Phone, User} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
//调用后台接口,完成注册
import {userLoginService, userRegisterService} from "@/api/user.js";
//绑定数据,复用注册表单的数据模型
//表单数据校验
//登录函数
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";
import slideVerify from "@/components/slideVerify.vue";

const isMounted = ref(false);

onMounted(() => {
  isMounted.value = true;
});
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false);
//定义数据模型
const registerData = ref({
  username: "",
  password: "",
  rePassword: "",
  phone: "", // 新增电话号码
  nickname: "", // 新增昵称
  email: "", // 新增邮箱
  department: "", // 新增部门
  position: "", // 新增职位
});

// 部门和职位数据
const departments = [
  {name: "政教处", positions: ["政教处主任", "政教处副主任", "政教处干事"]},
  {name: "团委", positions: ["校团委书记", "校团委副书记"]},
  {
    name: "教务处",
    positions: ["教务处长", "教务副处长", "辅导员", "导师", "教授"],
  },
  {name: "保卫科", positions: ["保卫科科长", "保卫人员"]},
  {name: "网络管理部", positions: ["信息监管人员", "网络运维"]},
];

const positions = ref([]); // 初始化职位数组

// 更新职位选项的方法
const updatePositions = () => {
  const selectedDepartment = registerData.value.department;
  const department = departments.find(dept => dept.name === selectedDepartment);
  positions.value = department ? department.positions : [];
};

//校验密码的函数
const checkRePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次确认密码"));
  } else if (value !== registerData.value.password) {
    callback(new Error("请确保两次输入的密码一样"));
  } else {
    callback();
  }
};

//定义表单校验规则
const rules = {
  username: [
    {required: true, message: "请输入用户名", trigger: "blur"},
    {min: 2, max: 16, message: "长度为2~16位非空字符", trigger: "blur"},
  ],
  password: [
    {required: true, message: "请输入密码", trigger: "blur"},
    {min: 5, max: 16, message: "长度为5~16位非空字符", trigger: "blur"},
  ],
  rePassword: [{validator: checkRePassword, trigger: "blur"}],
  phone: [
    {required: true, message: "请输入电话号码", trigger: "blur"},
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入有效的电话号码",
      trigger: "blur",
    },
  ],
  nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
  email: [
    {required: true, message: "请输入邮箱地址", trigger: "blur"},
    {type: "email", message: "请输入有效的邮箱地址", trigger: "blur"},
  ],
  department: [{required: true, message: "请选择部门", trigger: "change"}],
  position: [{required: true, message: "请选择职位", trigger: "change"}],
};

const handleRegister = async () => {
  let result = await userRegisterService(registerData.value);
  ElMessage.success(result.msg ? result.msg : "注册成功");
};

const router = useRouter();
const tokenStore = useTokenStore();
const isVerifySuccess = ref(false); // 跟踪验证码状态
const slideVerifyRef = ref(null); // 引用 slide-verify 组件

const handleLogin = async () => {
  if (!isVerifySuccess.value) {
    ElMessage.error("请先完成验证码验证");
    return;
  }

  userLoginService(registerData.value)
      .then((result) => {
        ElMessage.success("登录成功");
        tokenStore.setToken(result.data);
        router.push("/");
      })
      .catch((err) => {
        ElMessage.error(err?.message || "登录失败");
        if (isVerifySuccess.value) {
          slideVerifyRef.value?.block?.refresh();
          clearRegisterData();
          isVerifySuccess.value = false;
        }
      });
};

//定义函数,清空数据模型的数据
const clearRegisterData = () => {
  registerData.value = {
    username: "",
    password: "",
    rePassword: "",
  };
};

const ruleFormRefRegister = ref();
const ruleFormRefLogin = ref();

// 提交表单
const submitForm = (formEl, type) => {
  console.log("registerData.value", registerData.value);

  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      type == "login" ? handleLogin() : handleRegister();
    } else {
    }
  });
};

const handleVerifySuccess = () => {
  isVerifySuccess.value = true;
  console.log("验证码验证成功，状态已更新");
};
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <!-- 注册表单 -->
      <el-form
          ref="ruleFormRefRegister"
          size="large"
          autocomplete="off"
          v-if="isRegister"
          :model="registerData"
          :rules="rules"
      >
        <el-form-item>
          <h1>新疆大学会议室预约系统</h1>
        </el-form-item>
        <el-form-item>
          <h2>注册</h2>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
              :prefix-icon="User"
              placeholder="请输入用户名"
              v-model="registerData.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入密码"
              v-model="registerData.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入再次密码"
              v-model="registerData.rePassword"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input
              :prefix-icon="Phone"
              placeholder="请输入电话号码"
              v-model="registerData.phone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="nickname">
          <el-input
              placeholder="请输入昵称"
              v-model="registerData.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input
              type="email"
              placeholder="请输入邮箱"
              v-model="registerData.email"
          ></el-input>
        </el-form-item>
        <el-form-item prop="department">
          <el-select
              v-model="registerData.department"
              placeholder="请选择部门"
              @change="updatePositions"
          >
            <el-option
                v-for="dept in departments"
                :key="dept.name"
                :label="dept.name"
                :value="dept.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="position">
          <el-select v-model="registerData.position" placeholder="请选择职位">
            <el-option v-for="pos in positions" :key="pos" :label="pos" :value="pos"></el-option>
          </el-select>
        </el-form-item>
        <!-- 注册按钮 -->
        <el-form-item>
          <el-button
              class="button"
              type="primary"
              auto-insert-space
              @click="submitForm(ruleFormRefRegister, 'register')"
          >
            立即注册
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link
              type="info"
              :underline="false"
              @click="
              isRegister = false;
              clearRegisterData();
            "
          >
            ← 已有账号点此登录
          </el-link>
        </el-form-item>
      </el-form>
      <!-- 登录表单 -->
      <el-form
          ref="ruleFormRefLogin"
          size="large"
          autocomplete="off"
          v-else
          :model="registerData"
          :rules="rules"
      >
        <el-form-item>
          <h1>新疆大学会议室预约系统</h1>
        </el-form-item>
        <el-form-item>
          <h2>登录</h2>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
              :prefix-icon="User"
              placeholder="请输入用户名"
              v-model="registerData.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              name="password"
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入密码"
              v-model="registerData.password"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item class="flex">-->
        <!--          <div class="flex">-->
        <!--            <el-checkbox>记住我</el-checkbox>-->
        <!--            &lt;!&ndash; <el-link type="primary" :underline="false">忘记密码？</el-link> &ndash;&gt;-->
        <!--          </div>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <slide-verify
              ref="slideVerifyRef"
              @verify-success="handleVerifySuccess"
          ></slide-verify>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
              class="button"
              type="primary"
              auto-insert-space
              @click="submitForm(ruleFormRefLogin, 'login')"
          >登录
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link
              type="info"
              :underline="false"
              @click="
              isRegister = true;
              clearRegisterData();
            "
          >
            先去注册 →
          </el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>

::v-deep(.el-input__wrapper) {
  border-bottom: 1px solid #999 !important;
  border-radius: 0 !important;
  box-shadow: none;
}

::v-deep(.el-input__prefix) {
  color: #ff4040 !important;
  font-weight: bold;
}

::v-deep(.el-button--large) {
  border-radius: 50px !important;
}

::v-deep(.el-button--primary) {
  background: linear-gradient(to top right, #b42b2b, #ff2727);
}

::v-deep(.el-form-item__content) {
  justify-content: center;
}

/* 样式 */
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background: url("@/assets/bg.png") no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>